@charset "utf-8";

@function vw($a){
    @return ( $a / 750 ) * 100vw;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body,.web{
    width: 100%;
    height: 100%;
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 50px;
}
.page1{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    img{
        
        width:100%;
        height:80%;
    }
    .font1{
        display: inline-block;
        height: 10%;
        width: 100%;
        text-align: center;
        font-family:"楷体";
         h1{
            font-size: vw(40);
            text-align: center;
            line-height: vw(80);
            font-weight: normal;
        }
        p{
            font-size: vw(40); 
        }
    }
     h2{
                font-size: vw(80);
                color: red;
                font-weight: bold;
                padding-bottom: vw(20);
            }
    .animateds{
        width:100%;
        height: 100%;
        position: absolute;
        top: 0;
        
        ul{
            width:100%;
            height: 80%;
            li{
                width: 32%;
                height: 24%;
                float: left;
                border-right: vw(14) solid white;
                border-bottom:vw(11) solid white;
            }
            li:nth-child(3n){
                border-right: 0;
            }
        }
    }
   
    
}
.daren{
    animation: ybz;
}


.daren{
//  transition: 3s;
    animation: fudong 3s ease 4s 1 forwards;
}

@keyframes fudong{
    0%{
        transform: translateY(vw(-1000)) rotate(0) scale(0.5);
    }
    50%{
        transform: translateY(vw(-500)) rotate(360deg) scale(0.5);
    }
    100%{
        transform:translateY(0) rotate(360deg) scale(1);
    }
}
@keyframes xiafu{
    0%{
        transform: translate(vw(1000) );
    }
    25%{
        transform: ttranslate(0) ;
    }
}
.touming{
    animation: touming 3s ease 500ms 1 forwards;
}
@keyframes touming{
    0%{
       opacity: 0;
    }
    50%{
      opacity: 0.5;
    }
    100%{
        opacity:1;
    }
}
.fonts{
    animation: shangxian 3s ease 2300ms 1 forwards;
}
@keyframes shangxian{
    0%{transform: translateY(vw(200));opacity: 0;}
    50%{transform: translateY(vw(0)) rotateY(45deg);opacity: 0.5;}
    100%{transform:translateY(vw(0)) rotateY(0);opacity: 1;}
}
//.swing2{
//   animation: swing1 500ms ease 0s infinite alternate;
//}
@keyframes swing1{
    0%{transform: rotateZ(-30deg);}
    100%{transform: rotateZ(0);}
}
//
.flash{
    animation-iteration-count: infinite;
}
.page2{
   
    
    img{
        margin-top: vw(100);
        width: 50%;
        height: 30%;
    }
    p{
        width: 100%;
        font-size: vw(40);
        color: skyblue;
        margin-top: vw(100);
    }
    p:nth-child(2){
        text-align: left;
    }
    p:nth-child(3){
        text-align: right;
        color: red;
    }
    p:nth-child(4){
        text-align:left;
        color:skyblue;
    }
}
.page3{
    h1{
        font-size: vw(40);
        width: 60%;
        margin-top:vw(50);
        color: deepskyblue;
        text-align: left;
    }
    h2{
        font-size: vw(40);
        width: 60%;
        float: right;
        text-align: left;
        margin-top:vw(50);
        color: deepskyblue;
    }
    img{
        margin-top:vw(50);
        width: 100%;
        height: 30%;
    }
    .zoomInUp{
        margin: 0 auto;
        width: 50%;
        height: 20%;
       
    }
}
.page4{
    background: skyblue;
    width: 100%;
    height: 100%;
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
    .qipao{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        margin-top: 15%;
        .qipao1{
            margin-top:5%;
            margin-right: vw(40);
            width:60%;
            float: right;
            height: vw(100);
            border: 1px solid black;
            background: green;
            font-size: vw(40);
            line-height: vw(100);
            border-radius: vw(20);
            color: skyblue;
            position: relative;
        }
        .qipao1:before{
            content:'';
            position:absolute;
            top:90%;
            right:vw(-34);
            width:vw(32);
            height:vw(32);
            border-width:0;
            border-style:solid;
            border-color:transparent;
            border-left-width:vw(20);
            border-left-color:currentColor;
            border-radius:0 0 0 vw(32);
            color:green;
        }
        .qipao2{
            margin-top:5%;
            margin-left: vw(40);
            width:30%;
            float:left;
            height: vw(100);
            border: 1px solid black;
            background:skyblue;
            font-size: vw(40);
            line-height: vw(100);
            border-radius: vw(20);
            color:red;
            position: relative;
        }
        .qipao2:before{
            content:'';
            position:absolute;
            top:102%;
            left:vw(-32);
            width:vw(32);
            height:vw(32);
            border-width:0;
            border-style:solid;
            border-color:transparent;
            margin-top:-6px;
            border-right-width:vw(20);
            border-right-color:currentColor;
            border-radius:0 0 vw(32) 0;
            color:skyblue;
        }
        .qipao3{
            margin-top:20%;
            margin-right: vw(40);
            width:30%;
            float: right;
            height: vw(100);
            border: 1px solid black;
            background: green;
            font-size: vw(40);
            line-height: vw(100);
            border-radius: vw(20);
            color: skyblue;
            position: relative;
        }
        .qipao3:before{
            content:'';
            position:absolute;
            top:90%;
            right:vw(-34);
            width:vw(32);
            height:vw(32);
            border-width:0;
            border-style:solid;
            border-color:transparent;
            border-left-width:vw(20);
            border-left-color:currentColor;
            border-radius:0 0 0 vw(32);
            color:green;
        }
        .qipao4{
            width: 30%;
            height:vw(200);
            float: left;
            margin-top: 20%;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.page5{
    img{
        width: 30%;
        height:vw(300);
    }
    p{
        margin-left: vw(30);
        font-size: vw(40);
        text-align:left;
        color: skyblue;
    }
    p:nth-child(odd){
        text-align: right;
    }
}
